page{
  width: 100%;
  height: 100%;
  background-color: #7801fe;
}

.page-bg{
  width: 100%;
  min-height: 100%;
  background-image: url(http://p9ofir1eb.bkt.clouddn.com/image/bj.jpg);
  background-color: #7801fe;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  padding-top: 30rpx;
}
.top-banner{
  width: 100%;
  height: 306rpx;
  //background-image: url(http://p9ofir1eb.bkt.clouddn.com/image/pc_26.png);
  //background-position: center;
  //background-repeat: no-repeat;
  //background-size: cover;
  image{
    display: block;
    width: 100%;
    height: 306rpx;
  }
}
.container{
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.UserInfor{
  width: 100%;
  height: 455rpx;
  //border-radius: 30rpx;
  //background-color: rgba(43,29,96,0.5);
  background: url(http://p9ofir1eb.bkt.clouddn.com/image/pc_25_.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 37rpx;
  padding-top: 10rpx;
  .UserInfor-header{
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: rgba(255,255,255,0.4) 6rpx solid;
    image{
      display: block;
      border-radius: 50%;
      overflow: hidden;
      width: 150rpx;
      height: 150rpx;
    }
    button{
      display: block;
      width: 150rpx;
      height: 150rpx;
      padding: 0;
    }
  }
  .Sign{
    //padding-top: 105rpx;
    height: 130rpx;
    position: relative;
    margin-bottom: 30rpx;
    .SignIn{
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 20rpx;
      p{
        font-size: 32rpx;
        line-height: 32rpx;
        margin-bottom: 20rpx;
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        span{
          font-size: 65rpx;
          color: #ffde00;
          margin-left: 20rpx;
          margin-right: 20rpx;
        }
      }
      p:last-child{
        line-height: 65rpx;
        margin-bottom: 0rpx;
      }
    }
    .UnSign{
      width: 520rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 44rpx;
      color: #ffffff;
      font-size: 32rpx;
      background: #2b1d60;
      position: absolute;
      left: 50%;
      margin-left: -260rpx;
      bottom: 20rpx;
    }

  }
  .StartGame2{
    width: 388rpx;
    height: 157rpx;
    background: url(http://p9ofir1eb.bkt.clouddn.com/image/pc_21_.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: none;
    margin-bottom: -20rpx;
  }
  .StartGame2:active{
    width: 388rpx;
    height: 157rpx;
    background: url(http://p9ofir1eb.bkt.clouddn.com/image/pc_22_.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: none;
    margin-bottom: -20rpx;
  }
  .StartGame2::after{
    border: none;
  }
  .StartGame{
    width: 520rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    border-radius: 44rpx;
    color: #ffffff;
    font-size: 32rpx;
    background: linear-gradient(to left,#f67c4c,#ff4595);
    box-shadow: 0rpx 0rpx 15rpx rgba(254,102,137,0.4);
    margin-bottom: 40rpx;
  }
}
.OtherLocal{
  padding-left: 120rpx;
  padding-right: 120rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .Other_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    .Other_box_circle{
      width: 90rpx;
      height: 90rpx;
      border-radius: 45rpx;
      background-color: rgba(43,29,96,0.2);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-bottom: 20rpx;
      image{
        display: block;
        width: 42rpx;
        height: 42rpx;
      }
    }
    button{
      margin-right: 0;
      margin-left: 0;
      padding: 0;
    }
    .Other_box_name{
      color: #ffffff;
      font-size: 24rpx;
      line-height: 24rpx;
      text-align: center;
      opacity: 0.6;
    }
  }
}
.Adv{
  width: 100%;
  //height: 160rpx;
  height: 215rpx;
  background-color: #ffde00;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.PerRankingInfor{
  padding-right: 30rpx;
  padding-left: 30rpx;
  display: flex;
  margin-bottom: 40rpx;
  .Per{
    flex: 1;
  }
  .RankInfor{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    view:first-child{
      font-size: 48rpx;
      line-height: 48rpx;
      font-weight: bold;
      color: #ffde00;
      margin-bottom: 5rpx;
    }
    view:last-child{
      font-size: 24rpx;
      line-height: 24rpx;
      color: #ffffff;
      opacity: 0.7;
    }
  }
  .PerInfor{
    display: flex;
    flex-direction: column;
    align-items: center;
    .PerInfor-hearder{
      width: 140rpx;
      height: 140rpx;
      border-radius: 80rpx;
      border: #ffffff 6rpx solid;
      overflow: hidden;
      margin-bottom: 20rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .PerInfor-name{
      font-size: 32rpx;
      line-height: 32rpx;
      color: #ffffff;
      overflow: hidden;
    }
  }
}
.Ranking{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30rpx;
  .RankingType{
    width: 660rpx;
    height: 88rpx;
    border-radius: 44rpx;
    background-color: #382a67;
    position: relative;
    display: flex;
    .RankType{
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      z-index: 2;
      display: flex;
      view{
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #ffffff;
      }
    }
    .RankTypeBj{
      position: relative;
      width: 620rpx;
      height: 100%;
      .RankTypeBjaction1{
        position: absolute;
        top:11rpx;
        left: 25%;
        margin-left: -140rpx;
        width: 320rpx;
        height: 66rpx;
        border-radius: 33rpx;
        background-color: #ff4582;
        z-index: 1;
        transition: left 0.5s;
      }
      .RankTypeBjaction2{
        position: absolute;
        top:11rpx;
        left: 75%;
        margin-left: -140rpx;
        width: 320rpx;
        height: 66rpx;
        border-radius: 33rpx;
        background-color: #ff4582;
        z-index: 1;
        transition: left 0.5s;
      }
    }
  }
  .RankingList{
    width: 620rpx;
    height: 650rpx;
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    background-color: #453484;
    margin-top: -50rpx;
    padding-top: 70rpx;
    margin-bottom: 30rpx;
    padding-bottom:50rpx;
    .image{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      image{
        display: block;
        width: 176rpx;
        height: 205rpx;
        margin-bottom: 40rpx;
      }
      view{
        font-size: 28rpx;
        color: #d1c4fe;
      }
    }
    .ul{
      height: 100%;
      padding-left: 20rpx;
      padding-right: 20rpx;
      overflow-x: hidden;
      overflow-scrolling:touch;
      .li{
        padding-right: 20rpx;
        padding-left: 20rpx;
        height: 120rpx;
        border-radius: 20rpx;
        background-color: #3e2e72;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;
        .ChallengePer{
          width: 380rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          .displace{
            display: block;
            width: 60rpx;
            height: 80rpx;
            margin-right: 30rpx;
          }
          .displace2{
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
            background-color: rgba(255,255,255,0.1);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            color: #ffffff;
            margin-right: 30rpx;
          }
          .perHead{
            width: 80rpx;
            height: 80rpx;
            border-radius: 80rpx;
            border: 4rpx rgba(255,255,255,0.4) solid;
            overflow: hidden;
            margin-right: 20rpx;
            image{
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .perName{
            width: 180rpx;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            font-size: 28rpx;
            color: #ffffff;
          }
        }
        .Number{
          color: #ffde00;
          font-size: 28rpx;
          line-height: 50rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
          view{
            font-size: 50rpx;
            font-weight: bold;
          }
        }
      }
    }
  }
  .showOff{
    width: 540rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    border-radius: 44rpx;
    color: #ffffff;
    font-size: 32rpx;
    background: linear-gradient(to left,#f67c4c,#ff4595);
    box-shadow: 0rpx 0rpx 15rpx rgba(254,102,137,0.4);
  }
}
.position{
  height: 70rpx;
  border-radius: 35rpx;
  background-color: #630ad3;
  color: #ffffff;
  font-size: 28rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 50rpx;
  padding-right: 50rpx;
  margin-bottom: 40rpx;
  view{
    display: inline-block;
    font-size: 48rpx;
    font-weight: bold;
    color: #ffde00;
    margin-right: 10rpx;
    margin-left: 10rpx;
  }
}
.MusicTurntable{
  width: 380rpx;
  height: 380rpx;
  border-radius: 380rpx;
  border: rgba(255,255,255,0.3) 13rpx solid;
  overflow: hidden;
  margin-bottom: 20rpx;
  position: relative;
  audio{
    display: block;
    width: 380rpx;
    height: 380rpx;
    background: #ffffff;
  }
  .imageStat{
    display: block;
    width: 380rpx;
    height: 380rpx;
    animation:mymove 10s linear infinite;
  }
  .imageEnd{
    display: block;
    width: 380rpx;
    height: 380rpx;
  }
  view{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
  }
  .end{
    background: url(http://p9ofir1eb.bkt.clouddn.com/image/pc_11.png) center no-repeat;
    background-size: 122rpx 122rpx;
  }
  .stat{
    background: url(http://p9ofir1eb.bkt.clouddn.com/image/pc_12.png) center no-repeat;
    background-size: 122rpx 122rpx;
  }
}
@keyframes mymove
{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.CountDown{
  width: 180rpx;
  height: 60rpx;
  border-radius: 60rpx;
  background-color: rgba(255,255,255,0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #ffffff;
  margin-bottom: 110rpx;
}
.optionList{
  width: 540rpx;
  .option{
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    background-color: rgba(56,42,103,0.5);
    color: #ffffff;
    font-size: 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
  }
  .option:hover,.action{
    background: linear-gradient(to left,#f67c4c,#ff4595);
    box-shadow: 0rpx 0rpx 15rpx rgba(254,102,137,0.4);
  }
  .option:last-child{
    margin-bottom: 0;
  }
}
.Prompt{
  position: fixed;
  top:0;
  width: 100%;
  height: 100%;
  z-index: 101;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120rpx;
  .Prompt-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    .Prompt-title{
      width: 461rpx;
      height: 118.75rpx;
      background-image: url(http://p9ofir1eb.bkt.clouddn.com/image/pc_10.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      font-size: 40rpx;
      line-height: 70rpx;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 4rpx 1rpx 0rpx #e2312d;
      text-align: center;
      position: relative;
    }
    .rectangle{
      width: 460rpx;
      height: 340rpx;
      border-radius: 25rpx;
      background-color: #ffffff;
      margin-top: -45rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 70rpx;
      .second{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #333333;
        padding-top: 100rpx;
        padding-bottom: 40rpx;
        view{
          font-size: 48rpx;
          color: #ff4582;
          font-weight: bold;
          margin-left: 10rpx;
          margin-right: 10rpx;
        }
      }
      .SongName{
        min-width: 326rpx;
        height: 80rpx;
        border-radius: 40rpx;
        background: linear-gradient(to left,#8822ff,#428aff);
        font-size: 36rpx;
        text-align: center;
        line-height: 80rpx;
        color: #ffffff;
      }
      .fenxiang{
        font-size: 32rpx;
        line-height: 48rpx;
        color: #333333;
        text-align: center;
        padding-top: 124rpx;
        .radfont{
          display: inline;
          color: #fa6c46;
          margin-left: 10rpx;
          padding-right: 10rpx;
        }
      }
    }
    .rectangle2{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .fenxiang{
        padding-top: 0rpx;
        margin-bottom: 20rpx;
      }
      .second{
        padding-top: 0rpx;
        padding-bottom: 0rpx;
      }
    }
    .Prompt-key{
      width: 464rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 44rpx;
      color: #ffffff;
      font-size: 32rpx;
      background: linear-gradient(to left,#f67c4c,#ff4595);
      box-shadow: 0rpx 0rpx 15rpx rgba(254,102,137,0.6);
      margin-bottom: 30rpx;
    }
    .Prompt-Second{
      width: 464rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 88rpx;
      border: #ffffff 4rpx solid;
      color: #ffffff;
      font-size: 32rpx;
    }
  }
}
.Prompt2{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0rpx;
}
@keyframes detailWaveMove
{
  from {background-position: 0rpx 0rpx;}
  to {background-position: -750rpx 0rpx;}
}



@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1528097272370'); /* IE9*/
  src: url('iconfont.eot?t=1528097272370#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1528097272370') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1528097272370#iconfont') format('svg'); /* iOS 4.1- */
}


.number{
  font-family:iconfont;
}
.detail{
  overflow: hidden;
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  height:100%;
  width: 100%;
  .wave_comen {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(http://p9ofir1eb.bkt.clouddn.com/image/pc_09.png);
    background-repeat: repeat-x;
    background-position: 0rpx 0rpx;

    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .wave1{
    top:20rpx;
    //animation: detailWaveMove 30s linear 0s infinite;
  }
  .wave2{
    //left:-100rpx;
    //animation: detailWaveMove 20s linear 0s infinite;
  }
  .wave3{
    top:40rpx;
    //left:-200rpx;
    //animation: detailWaveMove 60s linear 0s infinite;
  }
}
.fanhui{
  width: 140rpx;
  height: 70rpx;
  background: linear-gradient(to left,#f67c4c,#ff4595);
  box-shadow: 0rpx 0rpx 15rpx rgba(254,102,137,0.6);
  border-bottom-right-radius: 35rpx;
  border-top-right-radius: 35rpx;
  position: fixed;
  top:0rpx;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  image{
    display: block;
    width: 43rpx;
    height: 46rpx;
    margin-right: 32rpx;
  }
}
.float{
  position: fixed;
  top:80rpx;
  left: 50rpx;
  width: 114rpx;
  height: 118rpx;
  image{
    display: block;
    width: 114rpx;
    height: 118rpx;
  }
}

